<template>
  <draggable
    :list="widget.widgetList"
    item-key="id"
    v-bind="{ group: draggableName, ghostClass: 'ghost', animation: 200 }"
    tag="transition-group"
    :component-data="{ name: 'fade' }"
    handle=".drag-handler"
  >
    <template #item="{ element, index }">
      <div v-if="element.move">
        <component
          :is="FieldComs[`${element.type}Widget`]"
          :key="element.id"
          :widget="element"
        >
          <template v-if="element.id == selectedId">
            <el-button-group class="controlGroupCom">
              <el-text type="primary">{{ element.type }}</el-text>
              <el-button
                :icon="Rank"
                v-show="element.category != 'container'"
                class="drag-handler"
              ></el-button>
              <el-button
                :icon="Delete"
                @click.stop="onClickDelete(widget.widgetList, index)"
                >22</el-button
              >
            </el-button-group>
          </template>
        </component>
      </div>
      <component
        :is="FieldComs[`${element.type}Widget`]"
        :key="element.id"
        :widget="element"
        v-else
      >
        <template v-if="element.id == selectedId">
          <el-button-group class="controlGroupCom">
            <el-text type="primary">{{ element.type }}</el-text>
            <el-button
              :icon="Delete"
              @click.stop="onClickDelete(widget.widgetList, index)"
              >22</el-button
            >
          </el-button-group>
        </template>
      </component>
    </template>
  </draggable>
</template>

<script setup>
import draggable from "@marshallswain/vuedraggable";
import {
  selectedId,
  onClickDelete,
} from "@/views/pageDesign/components/globalVariable";
import FieldComs from "@/views/pageDesign/components/centralRegion/index.js";
import { Delete, Rank } from "@element-plus/icons-vue";

defineOptions({
  name: "draggableList",
  inheritAttrs: false,
});

let $props = defineProps({
  widget: {
    type: Object,
    required: true,
  },
  draggableName: {
    type: String,
    default: "dragGroup",
  },
});
</script>

<style lang="scss" scoped>
// .controlGroupCom{
//   width:110px;
// }
</style>
